<!--
* @description 安全态势
* @author zywu
* @date 2021/01/09 10:46:22
!-->
<template>
  <div class="week-security-situation">
    <div class="situation-chart">
      <div id="situationChart"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    reportData: {
      type: Object,
      default: function () {
        return {}
      },
    },
    period: {
      type: [Number, String],
      default: '',
    },
    periodName: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },

  components: {},

  computed: {},

  created() {},

  mounted() {
    var data = this.reportData
    var securitySituation = data.securitySituation
    if (securitySituation)
      this.creatSituationChart(
        securitySituation.urgentHour,
        securitySituation.dangerHour,
        securitySituation.securityHour
      )
  },

  methods: {
    creatSituationChart(value1, value2, value3) {
      var dom = document.getElementById('situationChart')
      var situationChart = echarts.init(dom)
      var basicData = [
        { name: '告急时长', value: value1 },
        { name: '危险时长', value: value2 },
        { name: '安全时长', value: value3 },
      ]
      var options = {
        title: {
          text: `${this.period == 2 ? '本月' : '本季度'}安全态势`,
        },
        color: ['#FA7B59', '#FFC95D', '#75CD7E'],
        legend: {
          orient: 'vertical',
          x: '57%',
          y: 'center',
          data: [
            {
              name: '告急时长',
              icon:
                'image:///ilink-app-h5-zd/static/img/rdspFile_1559699271314.png',
            },
            {
              name: '危险时长',
              icon:
                'image:///ilink-app-h5-zd/static/img/rdspFile_1559699285778.png',
            },
            {
              name: '安全时长',
              icon:
                'image:///ilink-app-h5-zd/static/img/rdspFile_1559699251651.png ',
            },
          ],
          formatter: function (name) {
            var target
            for (var i = 0, l = basicData.length; i < l; i++) {
              if (basicData[i].name == name) {
                target = basicData[i].value
              }
            }
            var arr = ['{a|' + name + '}', '{b|' + target + '小时}']
            return arr.join('\n')
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 12,
                verticalAlign: 'bottom',
                align: 'left',
                color: '#999999',
                fontWeight: 600,
                padding: [0, 0, 20, 0],
              },
              b: {
                fontSize: 12,
                align: 'left',
                color: '#333333',
                lineHeight: 25,
              },
            },
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['30%', '50%'],
            center: ['30%', '50%'],
            // label : {
            // 	normal : {
            // 		show : false,
            // 		position : 'left'
            // 	},
            // 	emphasis : {
            // 		show : true,
            // 		textStyle : {
            // 			fontSize : '12',
            // 			fontWeight : 'bold'
            // 		}
            // 	}
            // },
            labelLine: {
              normal: {
                length: 10,
                lineStyle: {
                  color: '#E1E1E1',
                },
              },
            },
            label: {
              normal: {
                formatter: '{d}%',
                borderRadius: 4,
                padding: [0, -20],
              },
            },
            data: [
              {
                value: value1,
                name: '告急时长',
              },
              {
                value: value2,
                name: '危险时长',
              },
              {
                value: value3,
                name: '安全时长',
              },
            ],
          },
        ],
      }
      situationChart.setOption(options, true)
      window.onresize = function () {
        situationChart.resize()
      }
    },
  },
}
</script>
<style lang='scss'>
</style>